<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 移动网页必须设置 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <title>首页</title>
    <script src="./font_s/iconfont.js"> </script>
    <link rel="stylesheet" href="./swiper-7.2.0/swiper/swiper-bundle.min.css">
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        h3,
        h2,
        ul,
        p,
        body {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        .bnav {
            position: fixed;
            /* 固定的盒子 */
            left: 0;
            bottom: 0;
            width: 100%;
            /* 不设置为内容宽度 */
            background-color: #fff;
            z-index: 9;
            display: flex;
            /* 横着放 */
        }

        .bnav>li {
            width: 25%;
            text-align: center;
        }

        .bnav svg {
            font-size: 40px;
            line-height: 50px;
        }

        .bnav p {
            font-size: 14px;
            line-height: 28px;
        }

        .bnav a {
            color: #333;
        }

        body {
            min-width: 320px;
            margin-bottom: 80px;
            /* 最下面的东西可以显示（不会被nav挡住） */
        }

        .tnav {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            background-color: #fff;
            z-index: 8;
            display: flex;
        }

        .tnav>li {
            width: 25%;
            text-align: center;
        }

        .tnav p {
            line-height: 28px;
        }

        #header>ul>li li:last-child {
            font-size: 8px;
            color: rgb(187, 81, 81);
        }

        #header>ul>li li:first-child {
            border-bottom: #000;
        }

        .tnav a {
            color: #333;
            font-size: 20px;
        }

        img {
            display: block;
            border: none;
        }




        .slide img {
            width: 100%;
        }


        .slide h3 {
            position: absolute;
            left: 200px;
            /* bottom: 10px; */
            font-size: 16px;
            color: rgb(20, 18, 18);
            line-height: 33px;

        }

        .swiper-horizontal>.swiper-pagination-bullets,
        .swiper-pagination-bullets.swiper-pagination-horizontal,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            left: 35%;
        }

        .slide .swiper-pagination-bullet {
            border-radius: 50px;
            /* 圆角 */
            background: rgb(46, 214, 12);
            width: 15px;
            height: 9px;
        }

        #content1 {
            width: 100%;
        }

        .flex {
            margin: 7px;
        }

        .flex>li {
            display: flex;
            padding-bottom: 5px;
            margin-bottom: 5px;
            border-bottom: 1px dashed #333;

        }

        .hd {
            display: flex;
            padding-left: 10px;
        }


        .flex img {
            width: 150px;
            display: block;
        }

        .text {
            /* flex-grow: 1;
            display: flex;
            flex-wrap: wrap; */
            padding-top: 10px;
            padding-left: 10px;
            margin-right: 5px;
            padding-bottom: 10px;
            position: relative;
        }

        .text p {
            font-size: 13px;
            color: #aaa;
            padding: 0 10px;
            overflow: hidden;
            text-align: center;
        }

        .gimg {
            margin: 20px 0;
        }

        .gimg img {
            width: 120%;
        }

        .gimg p {
            font-size: 12px;
            color: #333;
            line-height: 20px;
            text-align: center;
        }
    </style>

    <link rel="stylesheet" href="./font_s/iconfont.css">
</head>

<body>
    <div id="header" class="clearfix">
        <ul class="tnav">
            <li>
                <p><a href="#">推荐</a></p>
            </li>
            <li>
                <p><a href="guanzhu.html">关注</a></p>
            </li>
            <li>
                <p><a href="huidaoxianchang.html">#回到现场</a></p>
            </li>
            <li>
                <p><a href="shuping.html">写书评</a></p>
            </li>
        </ul>
    </div>

    <div class="swiper slide">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#"><img src="./images/shuji.1.jpg" alt=""></a>
                <h3> 对话张嘉佳</h3>
            </div>

            <div class="swiper-slide">
                <a href="#"><img src="./images/shuji.2.jpg" alt=""></a>
                <h3> 蜗牛书单</h3>
            </div>

            <div class="swiper-slide">
                <a href="#"><img src="./images/shuji.3.jpg" alt=""></a>
                <h3> 蜗牛书讯</h3>
            </div>

            <div class="swiper-slide">
                <a href="#"><img src="./images/shuji.4.jpg" alt=""></a>
                <h3>蜗牛书摘</h3>
            </div>

            <div class="swiper-slide">
                <a href="#"><img src="./images/shuji.5.jpg" alt=""></a>
                <h3> 有奖安利</h3>
            </div>

        </div>
        <div class="swiper-pagination"></div><!-- 分页器 -->

    </div>
    <div id="content1" class="clearfix">
        <ul class="flex">
            <li>
                <div class="hd">
                    <h3>人性的弱点</h3>
                </div>
                <img src="./images/shuji.5.jpg" alt="">
                <div class="text">
                    <p>美国“成人教育之父”戴尔·卡耐基所著的《人性的弱点》，汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典，书的唯一目的就是帮助解决所面临的最大问题：如何在日常生活、商务活动与社会交往中与人打交道，并有效地影响他人
                    </p>

                </div>
                <div class="bt">

                </div>
            </li>

            <li>
                <div class="hd">
                    <h3>看图自学吉他</h3>
                </div>
                <img src="./images/shuji.8.jpg" alt="">
                <div class="text">
                    <p>这是一本吉他基础教程，主要针对吉他初学者。在基础知识部分从最基本的吉他调弦、琴弦安装、吉他选购、吉他分类，到认识乐谱、持琴姿势、基本演奏，都有详细说明。</p>

                </div>
                <div class="bt">

                </div>
            </li>

            <li>
                <div class="hd">
                    <h3>傲慢与偏见</h3>
                </div>
                <img src="./images/shuji.3.jpg" alt="">
                <div class="text">
                    <p>是英国女小说家简·奥斯汀创作的长篇小说。小说描写了小乡绅班纳特五个待字闺中的千金，主角是二女儿伊丽莎白。她在舞会上认识了达西，但是耳闻他为人傲慢，一直对他心生排斥，经历一番周折，伊丽莎白解除了对达西的
                    </p>

                </div>
                <div class="bt">

                </div>
            </li>
        </ul>


    </div>


    <div class="swiper gimg">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#"><img src="./images/img/1.jpg" alt=""></a>
                <p>短史记</p>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="./images/img/5.jpg" alt=""></a>
                <p>三生三世</p>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="./images/img/4.jpg" alt=""></a>
                <p>大萧条</p>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="./images/img/3.jpg" alt=""></a>
                <p>错探着</p>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="./images/img/2.jpg" alt=""></a>
                <p>独居老人</p>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="./images/img/1.jpg" alt=""></a>
                <p>逆流年代</p>
            </div>

        </div>

    </div>

    <div id="content1" class="clearfix">
        <ul class="flex">
            <li>
                <div class="hd">
                    <h3>人性的弱点</h3>
                </div>
                <img src="./images/shuji.8.jpg" alt="">
                <div class="text">
                    <p>美国“成人教育之父”戴尔·卡耐基所著的《人性的弱点》，汇集了卡耐基的思想精华和最激动人心的内容，是作者最成功的励志经典，书的唯一目的就是帮助解决所面临的最大问题：如何在日常生活、商务活动与社会交往中与人打交道，并有效地影响他人
                    </p>

                </div>
                <div class="bt">

                </div>
            </li>

            <li>
                <div class="hd">
                    <h3>看图自学吉他</h3>
                </div>
                <img src="./images/shuji.2.jpg" alt="">
                <div class="text">
                    <p>这是一本吉他基础教程，主要针对吉他初学者。在基础知识部分从最基本的吉他调弦、琴弦安装、吉他选购、吉他分类，到认识乐谱、持琴姿势、基本演奏，都有详细说明。</p>

                </div>
                <div class="bt">

                </div>
            </li>

            <li>
                <div class="hd">
                    <h3>傲慢与偏见</h3>
                </div>
                <img src="./images/shuji.4.jpg" alt="">
                <div class="text">
                    <p>是英国女小说家简·奥斯汀创作的长篇小说。小说描写了小乡绅班纳特五个待字闺中的千金，主角是二女儿伊丽莎白。她在舞会上认识了达西，但是耳闻他为人傲慢，一直对他心生排斥，经历一番周折，伊丽莎白解除了对达西的
                    </p>

                </div>
                <div class="bt">

                </div>
            </li>
        </ul>


    </div>

    <div id="footer" class="clearfix">
        <ul class="bnav">
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tushu-copy"></use>
                </svg>
                <p><a href="#">领读</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenlei"></use>
                </svg>
                <p><a href="fenlei.html">分类</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wuxiaodingdan"></use>
                </svg>
                <p><a href="shuzhuo.html">书桌</a></p>
            </li>
            <li>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-touxiang"></use>
                </svg>
                <p><a href="wo.html">我</a></p>
            </li>
        </ul>
    </div>
    <script src="./swiper-7.2.0/swiper/swiper-bundle.min.js"></script>
    <script>
        var swiper1 = new Swiper(".slide", {
            pagination: {
                el: ".swiper-pagination",
                clickable: true
            },
            autoplay: {
                /* 自动播放 */
                delay: 2500,
                disableOnInteraction: false,
            },
            /*     effect: 'cube',
                cubeEffect: {
                    slideShadows: true,
                    shadow: true,
                    shadowOffset: 100,
                    shadowScale: 0.6
                } */
        });
        var swiper2 = new Swiper(".gimg", {
            slidesPerView: 3,
            spaceBetween: 10,


        });
    </script>
</body>

</html>